<template>
  <div>
    <div class="serviceManagement">
      <el-table
        :data="
          searchList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        header-align="center"
      >
        <el-table-column prop="project_id" label="项目编号" align="center">
        </el-table-column>
        <el-table-column
          prop="project_name"
          label="项目名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="project_count"
          :formatter="servicecount"
          label="次数"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="project_type" label="项目类型" align="center">
        </el-table-column>
        <el-table-column
          prop="project_price"
          label="项目原价（元）"
          :formatter="serviceprice"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="project_info"
          label="项目介绍"
          width="360px"
          align="center"
        >
        </el-table-column>

        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="handleClick1(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <div class="disanhighui">
      <center>
        <div class="block">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 30, 40, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchList.length"
          >
          </el-pagination>
        </div>
      </center>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    searchList: {
      type: Array,
    },
  },
  data() {
    return {
      list: [],
      currentPage: 1, // 当前页码
      pageSize: 15, // 每页的数据条数
    };
  },
  methods: {
     handleClick1(row){
      this.$emit('subFndel',row.project_id)
    },
    handleClick(row){
      this.$router.push({
        path:'/datas10',
        query: {
          id: row.project_id,
        },
      });
    },
      handleSizeChange(val) {
      //   alert(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    serviceprice(row, column, cellValue, index) {
      return cellValue;
    },
    servicecount(row, column, cellValue, index) {
      return cellValue+"次";
      //   console.log(cellValue);
      //   if (cellValue === 1) {
      //     return <font color="#3DD4A7">待审核</font>;
      //   } else if (cellValue === 2) {
      //     return <font color="#FDDB78">待服务</font>;
      //   } else if (cellValue === 3) {
      //     return <font color="#FA746B">已驳回</font>;
      //   }
    },
  },
};
</script>

<style>
.disanhighui{
    float: left;
    width: 100%;
}
.xiakan {
  color: #2984f8;
  text-decoration: none;
}
.xiakan:hover {
  text-decoration: underline;
}
.serviceManagement {
  float: left;
  width: 96%;
  height: 100px;
  margin-left: 2%;
  margin-top: -2%;
  /* margin-top: 10%; */
  font-size: 10px;
  /* background-color: red; */
}
</style>